<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="canvas-handler">
    <ul>
      <el-tooltip effect="dark" content="小地图 (Ctrl+P)" placement="bottom">
        <li class="item" @click="switchMapState()">
          <svg-icon :icon-class="miniMapDisplay ? 'neibusuoxiao1' : 'neibukuoda1'" />
          小地图
        </li>
      </el-tooltip>
      <el-divider direction="vertical" />
      <el-tooltip v-for="(handler, index) in handlerConfig" :key="index" class="item" effect="dark"
        :content="handler.title" placement="top">
        <template #content>
          <div v-html="handler.title" />
        </template>

        <li class="item" @click="onHandleSideToolbar(handler.key)">
          <svg-icon :icon-class="handler.icon" />
        </li>
      </el-tooltip>
    </ul>
    <el-card v-show="miniMapDisplay" class="minimap">
      <div id="x6-minimap" />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import Mousetrap from 'mousetrap'
import { ref, reactive, computed,watch } from "vue"
import { designerStore } from 'src/stores/designerTool/designerTool'
import dagGraph from 'src/pages/designerTool/canvas/DagEdit/graph/index.js'
// shortcutKeyActive
const store=designerStore()
const miniMapDisplay=ref(true)
watch(()=>store.events.initEvent.index,(newData,oldData)=>{
  initEvent()
})
function initEvent() {
  // 适应画布
  Mousetrap.bind('ctrl+k', () => {
    onHandleSideToolbar('fit')
    return false
  })
  // 实际尺寸
  Mousetrap.bind('ctrl+o', () => {
    onHandleSideToolbar('real')
    return false
  })
  // 自动布局
  Mousetrap.bind('ctrl+f', () => {
    onHandleSideToolbar('automaticLayout')
    return false
  })
  // 打开关闭小地图
  Mousetrap.bind('ctrl+p', () => {
    switchMapState()
    return false
  })
  // 打开快捷键菜单
  Mousetrap.bind('ctrl+u', () => {
    updateShortcutKeyActive()
    return false
  })
}
function onHandleSideToolbar(action:any) {
  // 确保画布已渲染
  if (dagGraph.isGraphReady()) {
    miniMapDisplay.value = false
    store.SET_RIGHT_DRAWER(false)
    switch (action) {
      case 'in':
        dagGraph.zoomGraph(0.1)
        break
      case 'out':
        dagGraph.zoomGraph(-0.1)
        break
      case 'fit':
        dagGraph.zoomGraphToFit()
        break
      case 'real':
        dagGraph.zoomGraphRealSize()
        break
      case 'automaticLayout':
        dagGraph.automaticLayout()
        break
      case 'shortcutKey':
        updateShortcutKeyActive()
        break
      default:
    }
  }
}
function switchMapState() {
  miniMapDisplay.value = !miniMapDisplay.value
}
function updateShortcutKeyActive() {
  store.SET_SHORTCUT_KEY_ACTIVE(!store.shortcutKeyActive)
}
const handlerConfig = computed(() => {
  return [
    {
      title: '放大 (Ctrl+滚轮↑)',
      icon: 'fangda',
      key: 'in'
    },
    {
      title: '缩小 (Ctrl+滚轮↓)',
      icon: 'suoxiao',
      key: 'out'
    },
    {
      title: '适应画布 (Ctrl+K)<br>内容会撑满屏幕.',
      icon: 'quanping',
      key: 'fit'
    },
    {
      title: '实际尺寸 (Ctrl+O)<br>内容会展示实际大小,和画布大小没有关系.',
      icon: 'shijichicun',
      key: 'real'
    },
    {
      title: '自动布局 (Ctrl+F)<br>内容会按照一定算法合理排版布局.',
      icon: 'zidongbuju',
      key: 'automaticLayout'
    },
    {
      title: '快捷键说明',
      icon: 'shuoming',
      key: 'shortcutKey'
    }
  ]
})

</script>

<style lang="scss" scoped>
@import "src/css/designerStyles/index.scss";
.canvas-handler {
  position: absolute;
  bottom: 8px;
  left: 3px;
  z-index: 99;
  width: 254px;
  height: 38px;
  color: rgba(0, 0, 0, .45);
  font-size: 16px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .04);
  border-radius: 3px;
  box-shadow: 0 0 20px rgb(0 0 0 / 1%);

  ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style-type: none;
    margin: 0;
    padding: 6px 10px;

    .item {
      text-align: center;
      cursor: pointer;
      padding: 4px 0;

      .svg-icon {
        fill: rgb(100 100 100);
      }
    }

    .el-divider--vertical {
      margin: 0;
    }
  }

  .minimap {
    position: absolute;
    left: 0;
    bottom: 40px;
  }
}
</style>
